import { useState } from 'react'
import { HookItem } from '../types'
import PracticeEditor from './PracticeEditor'

interface HookDetailProps {
  hook: HookItem
}

export default function HookDetail({ hook }: HookDetailProps) {
  const [activeTab, setActiveTab] = useState<'code' | 'explanation' | 'usage' | 'practice'>('code')

  const tabs = [
    { id: 'code', label: '代码' },
    { id: 'explanation', label: '讲解' },
    { id: 'usage', label: '使用示例' },
    { id: 'practice', label: '练习' }
  ] as const

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
    // 这里可以添加一个toast提示
  }

  return (
    <div className="w-full">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">{hook.title}</h1>
        <p className="text-lg text-gray-600 mb-4">{hook.description}</p>
        
        <div className="flex flex-wrap gap-2">
          {hook.tags.map(tag => (
            <span
              key={tag}
              className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-gray-200 w-full">
        <div className="border-b border-gray-200">
          <nav className="flex space-x-8 px-6">
            {tabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
                  activeTab === tab.id
                    ? 'border-primary-500 text-primary-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-4">
          {activeTab === 'code' && (
            <div>
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-semibold text-gray-900">完整代码</h3>
                <button
                  onClick={() => copyToClipboard(hook.code)}
                  className="btn btn-secondary text-sm"
                >
                  复制代码
                </button>
              </div>
              <pre className="code-block">
                <code>{hook.code}</code>
              </pre>
            </div>
          )}

          {activeTab === 'explanation' && (
            <div>
              <h3 className="text-lg font-semibold text-gray-900 mb-4">详细讲解</h3>
              <div className="prose prose-gray max-w-none">
                <pre className="whitespace-pre-wrap text-gray-700 leading-relaxed">
                  {hook.explanation}
                </pre>
              </div>
            </div>
          )}

          {activeTab === 'usage' && (
            <div>
              <div className="flex justify-between items-center mb-4">
                <h3 className="text-lg font-semibold text-gray-900">使用示例</h3>
                <button
                  onClick={() => copyToClipboard(hook.usage)}
                  className="btn btn-secondary text-sm"
                >
                  复制示例
                </button>
              </div>
              <pre className="code-block">
                <code>{hook.usage}</code>
              </pre>
            </div>
          )}

          {activeTab === 'practice' && (
            <PracticeEditor
              title={hook.practice.title}
              description={hook.practice.description}
            />
          )}
        </div>
      </div>

      <div className="mt-8 p-6 bg-blue-50 rounded-xl border border-blue-200">
        <h3 className="text-lg font-semibold text-blue-900 mb-2">💡 提示</h3>
        <p className="text-blue-800">
          你可以点击"复制代码"或"复制示例"按钮来复制代码到剪贴板，然后直接在你的项目中使用。
          在"练习"标签页中，你还可以在线编辑和测试代码。
        </p>
      </div>
    </div>
  )
} 